<template>
  <section class="component account-number-under-the-customer" ref="account-number-under-the-customer">
    <el-card>
      <div slot="header">
        <span>客户名下在催账户</span>
      </div>
      <ul>
        <li v-for="({ caseNumber, caseId }, index) in caseInfoList" :key="index">
          <span class="account-number-span-style" @click="onClickCaseNumer(caseId, caseNumber, index)">{{ caseNumber }}</span>
          <el-button class="account-number-btn" @click="onClickDetail(caseNumber)" type="text">查看借据</el-button>
          <el-button class="account-number-btn" @click="searchOverdueAmountData(caseNumber)" type="text">查询最新逾期信息</el-button>
          <el-button class="account-number-btn" @click="openRepaymentQueryDialog(caseNumber)" type="text">实时还款查询</el-button>
        </li>
      </ul>
    </el-card>
    <!-- 查看借据弹窗 -->
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" :title="`账户下借据信息`" :visible.sync="dialog" append-to-body width="800px">
      <iou-information @close="dialog = false" ref="iou-information" />
    </el-dialog>
    <!-- 查询最新逾期信息弹窗 -->
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" title="最新逾期信息查询" :visible.sync="queryLoanInfoDialog" append-to-body width="820px">
      <query-loanInfo :queryLoanInfoDialog="queryLoanInfoDialog" @close="queryLoanInfoDialog = false" ref="query-loanInfo" />
    </el-dialog>
    <!-- 实时还款查询弹窗 -->
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" title="实时还款查询" :visible.sync="repaymentQueryDialog" append-to-body width="800px">
      <repayment-query :caseNumber="caseNumber" :repaymentQueryDialog="repaymentQueryDialog" @close="repaymentQueryDialog = false" ref="repayment-query" />
    </el-dialog>
  </section>
</template>
<script lang="ts">
import { namespace } from "vuex-class";
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import IouInformation from "./account-number-under-the-customer/iou-information.vue";
import RepaymentQuery from "./account-number-under-the-customer/repaymentQuery.vue";
import QueryLoanInfo from "./account-number-under-the-customer/query-loanInfo.vue";
import { CaseOperatorPageService } from "~/services/domain-service/case-operator-page.service";
import { Dependencies } from "~/core/decorator";
const CollectionExecutionModule = namespace("collection-execution");

@Component({
  components: {
    IouInformation,
    RepaymentQuery,
    QueryLoanInfo
  }
})
export default class AccountNumberUnderTheCustomer extends Vue {
  @CollectionExecutionModule.Mutation private updateCaseNo;
  @CollectionExecutionModule.Mutation private updateCaseId;
  @CollectionExecutionModule.State private caseId;
  @CollectionExecutionModule.Mutation private updateCaseInfoActiveName;
  @Dependencies(CaseOperatorPageService)
  private caseOperatorPageService: CaseOperatorPageService;
  @Prop() private caseInfoList;
  private dialog: boolean = false;
  private repaymentQueryDialog: boolean = false;
  private caseNumber: any = ''
  private queryLoanInfoDialog: boolean = false;
  private resetSetItem: any;

  @Watch("caseInfoList") private change (val) {
    if (!val && !val.length) return;
    setTimeout(() => {
      this.styleChange(0);
    }, 500);
  }
  private openRepaymentQueryDialog (caseNumber) {
    console.log('openRepaymentQueryDialog', caseNumber);
    console.log('caseInfoList', this.caseInfoList);

    this.repaymentQueryDialog = true
    this.caseNumber = caseNumber
  }

  private onClickDetail (caseNumber) {
    this.dialog = true;
    this.updateCaseNo(caseNumber);
    // console.log('this.updateCaseNo(caseNumber)', this.updateCaseNo(caseNumber));

    this.$nextTick(() => {
      const form: any = this.$refs["iou-information"];
      form.refreshData({ caseNumber });
      setTimeout(() => {
        form.styleChange(0);
      }, 500);
    });
  }
  private searchOverdueAmountData (caseNumber) {
    this.queryLoanInfoDialog = true;
    // this.caseNumber = caseNumber
    this.updateCaseNo(caseNumber);
  }
  private getOrderNum(caseId){
      this.caseOperatorPageService
      .queryCarLoanOrderInfo(caseId)
      .subscribe((data) => {
        this.resetSetItem('watchStorage', data["totalSize"]);
      })
  }

  private onClickCaseNumer (caseId, caseNumber, index) {
    this.getOrderNum(caseId)
    this.updateCaseInfoActiveName("");
    this.updateCaseId(caseId);
    this.updateCaseNo(caseNumber);
    this.styleChange(index);
    this.$nextTick(() => {
      this.updateCaseInfoActiveName("essential-information");
    });
  }

  private styleChange (index) {
    const box = this.$refs["account-number-under-the-customer"] as Element;
    const span: any = box.getElementsByClassName("account-number-span-style");
    for (const item of span) {
      item.classList.remove("active");
    }
    span[index].classList.add("active");
  }
}
</script>
<style lang="less" scoped>
.component.account-number-under-the-customer {
  .el-card {
    .el-card__body {
    }
    ul {
      padding: 0;
      margin: 0;
      display: flex;
      font-size: 12px;
      flex-wrap: wrap;
      height: 70px;
      overflow-y: auto;
      li {
        list-style: none;
        .account-number-span-style {
          cursor: pointer;
          padding-right: 10px;
        }
        .active {
          color: #409eff;
        }
        .account-number-btn {
          padding: 0;
        }
      }
    }
  }
}
</style>
